Gradients de fondo con Css3

En Net Tuts nos explican la forma de añadir degradados con Css3 o lo que es lo mismo gradients y al mismo tiempo conseguir que main y sidebar tengan la misma altura. Esto último es algo que todos intentamos conseguir cuando el color de fondo es distinto entre ambas columnas.

Para los ejemplos utilicé como siempre la plantilla Minima con su ancho habitual de width: 660px

Se añadió color de fondo en outer-wrapper y como vemos nuestro fondo adquirió dos tonos distintos de forma que cada uno ocupa el espacio correspondiente a main y sidebar.

#outer-wrapper {
background: -webkit-gradient(linear, left top, rightright top, from(turquoise), color-stop(.65, turquoise), color-stop(.35, tomato));
background: -moz-linear-gradient(left, turquoise 65%, tomato 35%);
......
......
}

Lo que haremos será jugar con el valor de los colores y utilizando el vista previa conseguimos un efecto de nuestro agrado.

#outer-wrapper {
background: -moz-linear-gradient(left, turquoise 35%, tomato 75%);
background: -webkit-gradient(linear, left top, rightright top, from(turquoise), color-stop(.35, turquoise), color-stop(.75, tomato));
......
......
}

Se puede ir probando con distintos resultados, pero hay que tener presente que al tratarse de Css3 no visualizaremos cambio alguno con Explorer.

background: -moz-linear-gradient(left, turquoise 5%, tomato 125%);
background: -webkit-gradient(linear, left top, rightright top, from(turquoise), color-stop(.5, turquoise), color-stop(.125, tomato));